<!-- <script lang="ts">
import { defineComponent } from 'vue';
import CustomButtonComponent from "./components/custom-button-component.vue";
export default defineComponent({
    components: {
        CustomButtonComponent
    },
});
</script> -->
<script lang="ts" setup>
defineOptions({ name: 'ShowingData' });

import { ref } from "vue";
import "ag-grid-community/styles/ag-grid.css";
import "ag-grid-community/styles/ag-theme-quartz.css";
import { AgGridVue } from "ag-grid-vue3";
import CustomButtonComponent from "./components/custom-button-component.vue";

const rowData = ref([
    { make: "Tesla", model: "Model Y", price: 64950, electric: true },
    { make: "Ford", model: "F-Series", price: 33850, electric: false },
    { make: "Toyota", model: "Corolla", price: 29600, electric: false },
    { make: "Mercedes", model: "EQA", price: 48890, electric: true },
    { make: "Fiat", model: "500", price: 15774, electric: false },
    { make: "Nissan", model: "Juke", price: 20675, electric: false },
]);

const colDefs = ref([
    {
        headerName: "厂商和型号",
        valueGetter: (p) => p.data.make + " " + p.data.model,
        flex: 2,
    },
    {
        field: "price",
        valueFormatter: (p) => "￥" + Math.floor(p.value).toLocaleString(),
        flex: 1,
    },
    {
        field: "electric",
        flex: 1,
    },
    {
        field: "button",
        cellRenderer: CustomButtonComponent,
        flex: 1,
    },
]);
</script>

<template>
    <!-- The AG Grid component -->
    <ag-grid-vue :rowData="rowData" :columnDefs="colDefs" style="height: 500px" class="ag-theme-quartz">
    </ag-grid-vue>
</template>